<template>
  <div id="app">
    <div v-if="$route.name !== 'Login'" class="app-container flex-col">
      <div class="main-container flex-col">
        <div class="background-container flex-col">
          <div class="content-container flex-col">
            <div class="header-container">
              <div class="title-bar">
                <span class="title-text">空间资源综合管理平台</span>
              </div>
              <div class="info-bar">
                <!-- 时间显示器部分 -->
                <div class="timer">
                  <div class="setting-icon" @click="setSettingShow(true)">
                    <img src="@/assets/img/headers/setting.png" alt="设置" />
                  </div>
                  {{ dateData.dateYear }} {{ dateData.dateWeek }} {{ dateData.dateDay }}
                </div>
                <!-- 图片和其他组件 -->
                <div class="header-right">
                  <div class="icon-container flex-col">
                    <div class="icon-block flex-col"></div>
                  </div>
                  <div class="admin-container">
                    <span class="admin-text">{{ username }}</span>
                  </div>
                  <!-- <img class="back-icon" referrerpolicy="no-referrer" src="@/assets/img/system/back.png" /> -->
                  <img class="exit-icon" referrerpolicy="no-referrer" src="@/assets/img/system/exit.png"
                    @click="logout" />
                </div>
              </div>
            </div>
            <div class="content-wrapper">
              <div class="margin-left"></div>
              <div class="sidebar">
                <Sidebar />
              </div>
              <div class="margin-middle"></div>
              <div class="content-main">
                <router-view />
              </div>
              <div class="margin-right"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <!-- 如果是登录页面，仅渲染登录页面的内容 -->
      <router-view />
    </div>
  </div>
</template>


<script>
import Sidebar from "./components/Sidebar.vue";
import dayjs from "dayjs";
import { mapMutations, mapState } from "vuex";

export default {
  name: 'App',
  components: {
    Sidebar
  },
  data() {
    return {
      dateData: {
        dateDay: "",
        dateYear: "",
        dateWeek: "",
        timing: null,
      },
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
    };
  },
  computed: {
    ...mapState(['username']), // 使用 Vuex 的 username 状态
  },
  mounted() {
    this.startTimer();
  },
  methods: {
    ...mapMutations(["setSettingShow", "clearUsername"]),
    startTimer() {
      this.dateData.timing = setInterval(() => {
        this.dateData.dateDay = dayjs().format("YYYY-MM-DD HH:mm:ss");
        this.dateData.dateWeek = this.weekday[dayjs().day()];
      }, 1000);
    },
    logout() {
      this.clearUsername(); // 调用 Vuex mutation 清除用户名
      localStorage.removeItem('authToken');
      this.$router.push({ name: 'Login' });
    },
  },
  beforeDestroy() {
    clearInterval(this.dateData.timing); // 清除定时器以避免内存泄漏
  },
}
</script>

<style>
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 页面总体样式 */
.app-container {
  background-color: rgba(6, 23, 38, 1);
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
}

.main-container {
  box-shadow: inset 0px 13px 40px 20px rgba(2, 28, 46, 1);
  background-image: url('@/assets/img/system/system_bg2.png');
  height: 100vh;
  width: 100vw;
}

.background-container {
  height: 100%;
  background: url('@/assets/img/system/system_bg3.png') no-repeat;
  background-size: cover;
}

.content-container {
  height: 100vh;
  background: url('@/assets/img/system/system_bg.png') no-repeat;
  background-size: cover;
}

.title-text {
  color: white;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 6px;
}

.timer {
  margin-left: 3%;
  margin-bottom: 10px;
  font-size: 18px;
  display: flex;
  align-items: center;
  color: #ffffff;
  width: 100%;
  height: 3vh;
}

.header-container {
  width: 100%;
}

.title-bar {
  width: 100%;
  text-align: center;
}

.info-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.header-right {
  display: flex;
  align-items: center;
  margin-right: 2rem;
  margin-bottom: 0.6rem;
}

.admin-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  background: url("@/assets/img/system/userbg.png") no-repeat;
  background-size: 120px 33px;
  width: 120px;
  margin-left: 22px;
  margin-right: 0.5rem;
}

.admin-text {
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
}

.setting-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin-left: 12px;
  margin-right: 12px;
}

.back-icon {
  margin-right: 0.5rem;
}

.exit-icon {
  margin-right: 0.5rem;
}

.margin-left {
  width: 3vw;
  height: 100vh;
}

.margin-middle {
  width: 1vw;
  height: 85vh;
}

.margin-right {
  width: 3vw;
  height: 85vh;
}

.content-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
}

.sidebar {
  width: 14vw;
  height: 85vh;
}

.content-main {
  flex-grow: 1;
  color: #ffffff;
  width: 100%;
  height: 85vh;
}
</style>
